<html>
	<head>
		<link rel="stylesheet" type="text/css" href="fonts/HelveticaNeueBold/HelveticaNeueBold.css" />
		<link rel="stylesheet" type="text/css" href="fonts/HelveticaNeueLight/HelveticaNeueLight.css" />
		<link rel="stylesheet" type="text/css" href="controls.css" />
		<style>
		body{
			margin:0;
			padding:0;
			background:#dcdfe5;
		}
		#top{
			background-image:url('img-ele/top.png');
			background-size:100% 50px;
			background-repeat:no-repeat;
			height:43px;
			text-align: center;
			font-family:"HelveticaNeueBold";
			font-size:2em;
			color:white;
			vertical-align:middle;
			padding-top:5px;
		}
		#pnl-wrapper{
			width:372px;
			margin:0 auto;
			height:280px;
		}
		#pnl-wrapper #pnl-top{
			width:372px;
			height:76px;
			background-image:url('img-ele/pnl_05.png');
			background-repeat:no-repeat;
		}
		#pnl-wrapper #pnl-side-left{
			width:36px;
			height:100%;
			background-image:url('img-ele/pnl_07.png');
			background-repeat:repeat-y;
			float:left;
		}
		#pnl-wrapper #pnl-side-right{
			width:29px;
			height:100%;
			background-image:url('img-ele/pnl_09.png');
			background-repeat:repeat-y;
			float:right;
			margin-right:1px;
		}
		#pnl-wrapper #pnl-side-content{
			float:left;
			width:auto;
			background:#dcdfe5;
			width:305px;
		}
		#pnl-wrapper #pnl-bottom{
			width:372px;
			height:90px;
			background-image:url('img-ele/pnl_12.png');
			background-repeat:no-repeat;
			clear:both;
		}
		#user{
			margin:0 auto;
			width:280px;
		}
		
		.btnType1 input{
			font-family:"HelveticaNeueLight";
			font-size:23px;
			color:#4c566c;
			width:180px;
			border:0px;
		}
		#login,#forgot{
			text-align:center;
			padding-left:0px;
			margin:-2px 8px;
		}
		a{
			text-decoration:none;
		}
		</style>
		
	</head>
	<body>
		<script src="jquery-1.4.2.min.js"></script>
		<script src="jquery-ui-1.8.13.custom.min.js"></script>
		<script src="jquery.dimensions.pack.js"></script>
		<script src="jquery.combobox.packed.js"></script>
		<script src="ulti.js"></script>
		<script src="jquery.multiple-bgs.min.js"></script>
		<div id="top">
			Login
		</div>
		<div id="pnl-wrapper">
			<div id="pnl-top">
				
			</div>
			<div id="pnl-side-left">
				
			</div>
			<div id="pnl-side-content">
				<div class="btnType1" id="user">
				User : <input type="text" name="user" id="userip"/>
				</div>
				<div class="btnType1" id="pass">
				Pass : <input type="password" name="pass" id="passip"/>
				</div>
				<a href="#login-function" >
					<div class="btnType2" id="login" onclick="login()">
						Login
					</div>
				</a>
				<a href="#fgpass-function">
					<div class="btnType2" id="forgot">
						Forgot Password ?
					</div>
				</a>
			</div>
			
				<div id="pnl-side-right">
					
				</div>
			
				<div id="pnl-bottom">
					
				</div>
			
			<script>
				function login(){
					var id=$("#userip").attr("value");
					var pass=$("#passip").attr("value");
					var path=waiter_service+"Login.aspx?username=$id&password=$pass";
					var path2="waiter.htm?id=$id";
					path=path.replace("$id",id);
					path=path.replace("$pass",pass);
					console.log(path);
					$.getJSON(path);
					
					$.ajax({
						url:path,
						success:function(data){
							eval("json="+data);
							//eval("json="+data);
							try{
								if(json.Success==true){
									if(json.isWaiter){
										path2=path2.replace("$id",json.WaiterID);
										window.location=path2;
									}else{
										alert("Login Failed : Is not waiter");
									}
								}else{
									alert("Login failed : "+json.Error);
								}
							}catch(e){
								alert("Login failed ");
							}
							
						}
					})
				}
			</script>
		</div>
	</body>
</html>